<template>
  <div class='human-left'>
    <!-- 地下空间人流饱和度 -->
    <div class="human-saturability">
      <h4>
        <span></span>
        <span>地下空间人流饱和度</span>
      </h4>
      <Human-saturability></Human-saturability>
    </div>
    <!-- 人流量趋势 -->
    <div class='human-density'>
      <h4>
        <span></span>
        <span>地下空间人流量趋势</span>
      </h4>
      <human-flow></human-flow>
    </div>
  </div>
</template>
<script>
import HumanFlow from '../echarts/EchartsHumanFlow'
import HumanSaturability from '../echarts/EchartsHumanSaturability'
export default {
  name: 'human-left',
  components: {
    HumanFlow,
    HumanSaturability
  }
}
</script>
<style lang="scss">
$precent: 100vw / 1920;
.human-left {
  h4 {
    color: #ddd;
    font-weight: 500;
    letter-spacing: 1 * $precent;
    text-align: left;
    margin: 2 * $precent 0 * $precent 15 * $precent 20 * $precent;
    font-size: 20 * $precent;
    height: 50 * $precent;
    line-height: 50 * $precent;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      width: 5 * $precent;
      height: 20 * $precent;
      background: #fff000;
      // margin-left: 25*$precent;
    }
    span:nth-child(2) {
      margin-left: 10 * $precent;
    }
    img {
      height: 40%;
      margin-left: 290 * $precent;
    }
  }
  .human-saturability {
    width: 463 * $precent;
    height: 611 * $precent;
    background: url("../../static/image/2/内容底图-1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: -10 * $precent;
    .saturability {
      height: 500 * $precent;
    }
  }
  .human-density {
    width: 463 * $precent;
    height: 409 * $precent;
    background: url("../../static/image/2/内容底图-2.png") no-repeat;
    background-size: 100% 100%;
  }
  .human-flow {
    width: 100%;
    height: 260 * $precent;
  }
}
</style>